<template>
  <view class="home-container">
    <!-- 导航 -->
    <searchBar></searchBar>
    <!-- 轮播图 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item,index) in swipers" :key="index">
        <view class="swiper-item">
          <!-- mode="widthFix" 宽度不变，高度自动变化，保持原图宽高比不变 -->
          <image :src="item.image_src" mode="widthFix"></image>
        </view>
      </swiper-item>
    </swiper>
    <!-- 导航 -->
    <view class="nav-box">
      <image v-for="item in navs" :key="item.name" :src="item.image_src"></image>
    </view>
    <!-- 楼层数据 -->
    <view class="floor-box" v-for="(item,index) in floors" :key="index">
      <!-- 头部 -->
      <view class="header">
        <image :src="item.floor_title.image_src"></image>
      </view>
      <!-- 底部 -->
      <view class="bottom">
        <!-- 左侧图片 -->
        <image :src="item.product_list[0].image_src"></image>
        <!-- 右侧图片 -->
        <view class="right">
          <!-- 因为v-for和v-if不能一起使用 -->
          <template v-for="(ie,inx) in item.product_list">
            <!-- 因为第一张图片不要,所以在v-if 的索引等于0的时候不要显示出来 -->
            <image v-if="inx !==0" :src="ie.image_src" :key="inx"></image>
          </template>
        </view>
        <!-- 返回顶部 -->
        <view class="to-top" v-if="isShow" @click="toTop">
          <text>^</text>
          顶部
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import searchBar from '../../components/searchBar.vue'
  export default {
    components: {
      searchBar
    },
    data() {
      return {

        // 导航数据
        navs: [],
        // 轮播图数据
        swipers: [],
        // 楼层数据
        floors: [],
        // 返回顶部是否显示
        isShow: false
      }
    },
    onLoad() {
      this.getSwipers()
      this.getNav()
      this.getFool()
    },
    // 滚动事件
    onPageScroll(ev) {
      // 显示
      if (ev.scrollTop >= 200) {
        this.isShow = true
      } else {
        // 隐藏
        this.isShow = false
      }
    },
    methods: {
      // 导航
      getNav() {
        this.$request({
          url: "/api/public/v1/home/catitems",
          method: "get"
        }).then(res => {
          this.navs = res
        })
      },
      // 轮播图
      getSwipers() {
        this.$request({
          url: "/api/public/v1/home/swiperdata",
          method: "get",
        }).then(res => {
          // console.log("home", res)
          this.swipers = res
        })
      },
      // 楼层数据
      getFool() {
        this.$request({
          url: "/api/public/v1/home/floordata",
          method: "get",
        }).then(res => {
          // console.log(res)
          this.floors = res
        })
      },
      // 返回顶部
      toTop() {
        uni.pageScrollTo({
          // 距离顶部的距离
          scrollTop: 0,
          // 返回需要的时间
          duration: 300
        })
      }
    }
  }
</script>

<style lang="less">
  .home-container {

    .swiper-images {
      width: 100%;
    }

    // 导航区域
    .nav-box {
      height: 194rpx;
      display: flex;
      justify-content: space-around;

      image {
        width: 128rpx;
        height: 140rpx;
      }
    }

    // 楼层样式
    .floor-box {
      .header {
        background-color: #f4f4f4;
        padding: 20rpx;
        padding-bottom: 0rpx;

        image {
          width: 1280rpx;
          height: 100rpx;
        }
      }

      .bottom {
        margin-top: 20rpx;
        display: flex;
        padding-left: 20rpx;

        image {
          width: 232rpx;
          height: 386rpx;
          margin-right: 10rpx;
        }

        .right {
          flex: 1;

          image {
            width: 232rpx;
            height: 188rpx;
            margin-right: 10rpx;
          }
        }
      }
    }

    .to-top {
      color: #797471;
      position: fixed;
      right: 20rpx;
      bottom: 40rpx;
      width: 120rpx;
      height: 120rpx;
      background-color: rgba(255, 255, 255, 0.3);
      text-align: center;
      border-radius: 50%;

      text {
        display: block;
      }
    }
  }
</style>
